<script setup>
import {computed, ref} from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  mode: {
    type: String,
    default: 'round', // round 圆角 ｜ rect 方形
  }
})

const emit = defineEmits(['update:modelValue'])

const trigger = ref(props.modelValue)
const statusClass = computed(() => ({
  y: trigger.value,
  n: !trigger.value,
}))
const containerClass = computed(() => ({
  ...statusClass.value,
  'switch-round-container': props.mode === 'round',
  'switch-rect-container': props.mode === 'rect',
  'control-round-bar': props.mode === 'round',
  'control-rect-bar': props.mode === 'rect',
}))

const click = () => {
  trigger.value = !trigger.value
  emit('update:modelValue', trigger.value)
}

</script>

<template>
  <view class="switch-container" :class="containerClass" @click="click">
    <view class="control-bar" :class="containerClass"></view>
    <view v-if="props.mode === 'rect'" class="text-container" :class="statusClass">
      <text class="n">负</text>
      <text class="y">正</text>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .switch-container {
    position: relative;
    transition: .5s;
    &.y {
      background-color: #7FCB81;
    }
    &.n {
      background-color: #A7AFBB;
    }
    .control-bar {
      position: absolute;
      z-index: 1;
      transition: .5s;
      background-color: #fff;
      &.y {
        right: 8rpx;
      }
      &.n {
        left: 8rpx;
      }
    }
    .text-container {
      position: absolute;
      z-index: 2;
      top: 8rpx;
      right: 8rpx;
      bottom: 8rpx;
      left: 8rpx;
      display: flex;
      color: #282727;
      font-family: PingFang SC;
      font-size: 36rpx;
      font-style: normal;
      font-weight: 600;
      line-height: 56rpx;
      text {
        display: block;
        flex: 1;
        text-align: center;
      }
      &.y {
        text:first-child {
          color: #fff;
        }
      }
      &.n {
        text:last-child {
          color: #fff;
        }
      }
    }
  }
  .switch-round-container {
    width: 96rpx;
    height: 64rpx;
    border-radius: 64rpx;
    .control-round-bar {
      top: 8rpx;
      width: 48rpx;
      height: 48rpx;
      border-radius: 32rpx;
    }
  }
  .switch-rect-container {
    width: 136rpx;
    height: 72rpx;
    border-radius: 16rpx;
    .control-rect-bar {
      top: 8rpx;
      width: 60rpx;
      height: 56rpx;
      border-radius: 12rpx;
    }
  }
</style>
